<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_ToolBar.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_ToolBar.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author zjh
 */
+function ($) {
	&quot;use strict&quot;;
	
	var $toolbar = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;toolbar&quot;).addClass(&quot;btn-toolbar&quot;);
	
	/**
	 * 工具栏组件，样式基于Bootstrap的ButtonGroup
	 * @class ToolBar
	 * @constructor
	 * @example
	 * 	js代码
	 * 	var datas = [
			{&quot;id&quot;:&quot;btn-ok&quot;,&quot;icon&quot;:&quot;ok&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;确认&quot;},
			{&quot;id&quot;:&quot;btn-cancel&quot;,&quot;icon&quot;:&quot;ban-circle&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;取消&quot;},
			null,
			{&quot;id&quot;:&quot;btn-bold&quot;,&quot;icon&quot;:&quot;bold&quot;,&quot;style&quot;:&quot;info&quot;,&quot;title&quot;:&quot;加粗&quot;},
			{&quot;id&quot;:&quot;btn-italic&quot;,&quot;icon&quot;:&quot;italic&quot;,&quot;style&quot;:&quot;info&quot;,&quot;title&quot;:&quot;倾斜&quot;},
			{&quot;id&quot;:&quot;btn-font&quot;,&quot;icon&quot;:&quot;font&quot;,&quot;style&quot;:&quot;info&quot;,&quot;title&quot;:&quot;字体&quot;},
			null,
			{&quot;id&quot;:&quot;btn-left&quot;,&quot;icon&quot;:&quot;align-left&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;&quot;},
			{&quot;id&quot;:&quot;btn-center&quot;,&quot;icon&quot;:&quot;align-center&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;&quot;},
			{&quot;id&quot;:&quot;btn-right&quot;,&quot;icon&quot;:&quot;align-right&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;&quot;},
		];
		
		$(function(){
			$(&quot;#myToolBar&quot;).toolbar({
				datas:datas
			});
		}
		
		html代码
		&lt;div id=&quot;myToolBar&quot;&gt;&lt;/div&gt;
	 */
	var ToolBar = function (element, options) {
		//4
		this.$element = $(element);
		this.options = $.extend({}, $.fn.toolbar.defaults, options);
		//事件列表
		this.render();
	};
	
	ToolBar.prototype={
			
		constructor:ToolBar,
		
		render:function(){
			var datas = this.options.datas;
			this.addTool(datas);
			$toolbar.appendTo(this.$element);
		},
		
		renderData:function(data){
			var id = data.id;
			var icon = data.icon;
			var style = data.style;
			var title = data.title;
			var $button = $(&quot;&lt;button&gt;&lt;/button&gt;&quot;).addClass(&quot;btn&quot;)
												.addClass(&quot;btn-lg&quot;);
			$button.addClass(&quot;btn-&quot; + style);
			$button.attr(&quot;id&quot;,id);
			
			var $icon = $(&quot;&lt;i&gt;&lt;/i&gt;&quot;);
			$icon.text(title);
			$icon.addClass(&quot;icon-&quot; + icon);
			$icon.appendTo($button);
			
			return $button;
		},
		
		/**
		 * 在原有的工具栏基础上再添加
		 * @method addTool
		 * @param {Array} datas
		 */
		addTool:function(datas){
			var $btnGroup = $(&quot;&lt;div class=&#x27;btn-group&#x27; data-toggle=&#x27;buttons&#x27;&gt;&lt;/div&gt;&quot;);
			//分组
			for(var key in datas){
//				console.info(datas[key]);
				var data = datas[key];
				if(data==null){
					$btnGroup.appendTo($toolbar);
					$btnGroup = $(&quot;&lt;div class=&#x27;btn-group&#x27; data-toggle=&#x27;buttons&#x27;&gt;&lt;/div&gt;&quot;);
				}else{
					var $button = this.renderData(data);
					$button.appendTo($btnGroup);
					//如果是最后的
					if(key==datas.length-1){
						$btnGroup.appendTo($toolbar);
					}
				}
			}
		}
	};
	
	//加入到jQuery插件
	$.fn.toolbar = function(option,value){
		//3
		var methodReturn;

		var $set = this.each(function () {
			var $this = $(this);
			var data = $this.data(&#x27;koala.toolbar&#x27;);
			var options = typeof option === &#x27;object&#x27; &amp;&amp; option;

			if (!data) $this.data(&#x27;koala.toolbar&#x27;, (data = new ToolBar(this, options)));
			if (typeof option === &#x27;string&#x27;) methodReturn = data[option](value);
		});

		return (methodReturn === undefined) ? $set : methodReturn;
	};
	
	//默认属性列表
	$.fn.toolbar.defaults = {
		/**
		 * 工具栏数据
		 * @property datas
		 * @type {Array}
		 * @default []
		 * @example
		 * 	var datas = [
				{&quot;id&quot;:&quot;btn-ok&quot;,&quot;icon&quot;:&quot;ok&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;确认&quot;},
				{&quot;id&quot;:&quot;btn-cancel&quot;,&quot;icon&quot;:&quot;ban-circle&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;取消&quot;},
				null,
				{&quot;id&quot;:&quot;btn-bold&quot;,&quot;icon&quot;:&quot;bold&quot;,&quot;style&quot;:&quot;info&quot;,&quot;title&quot;:&quot;加粗&quot;},
				{&quot;id&quot;:&quot;btn-italic&quot;,&quot;icon&quot;:&quot;italic&quot;,&quot;style&quot;:&quot;info&quot;,&quot;title&quot;:&quot;倾斜&quot;},
				{&quot;id&quot;:&quot;btn-font&quot;,&quot;icon&quot;:&quot;font&quot;,&quot;style&quot;:&quot;info&quot;,&quot;title&quot;:&quot;字体&quot;},
				null,
				{&quot;id&quot;:&quot;btn-left&quot;,&quot;icon&quot;:&quot;align-left&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;&quot;},
				{&quot;id&quot;:&quot;btn-center&quot;,&quot;icon&quot;:&quot;align-center&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;&quot;},
				{&quot;id&quot;:&quot;btn-right&quot;,&quot;icon&quot;:&quot;align-right&quot;,&quot;style&quot;:&quot;success&quot;,&quot;title&quot;:&quot;&quot;},
			];
			
			$(&quot;#myToolBar&quot;).toolbar({
				datas:datas
			});
		 */
		datas:[],
		
	};
	
	//插件的构造对象赋值
	$.fn.toolbar.Constructor = ToolBar;
}(window.jQuery);
    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
